<template>
    <div class="app-container">
        <!-- 企业画像 -->
        <!-- <iframe src="http://33k931m051.wicp.vip/frxyk/xin/index.html" frameborder="0" width="100%" scrolling="yes"
            height="800"></iframe> -->
<!--            <iframe src="http://223.113.10.215:18000/frxyk/xin/index.html" frameborder="0" width="100%" scrolling="yes"-->
<!--            height="800"></iframe>-->
        <!-- <iframe src="http://2.82.9.16:9080/frxyk/xin/index.html" frameborder="0" width="100%" scrolling="yes"
            height="800"></iframe> -->
        <iframe src="https://xyjg.nantong.cn/frxyk/xin/index.html" frameborder="0" width="100%" scrolling="yes"
            height="800"></iframe>
        <el-card style="display: none;">
            <el-row :gutter="10" class="b">
                <el-col :span="10">
                    <el-input type="primary" v-model="cName" placeholder="请输入公司名称/法人姓名/统一社会信用代码"></el-input>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="queryQy(cName)">查询</el-button>
                </el-col>
            </el-row>
            <div class="his_table" v-if="!bodyShow">
                <div class="h_tab" :style="{color:`${$store.getters.color}`}">
                    历史浏览
                </div>
                <el-table :data="hisList" border :header-row-style="{color:'#5a607f'}"
                    :row-style="{color:'#3a3f63', 'font-size':'0.88rem'}" @row-click="toPortray">
                    <el-table-column prop="qymc" label="企业名称"></el-table-column>
                    <el-table-column prop="zczb" label="注册资本"></el-table-column>
                    <el-table-column prop="fddbr" label="法定代表人"></el-table-column>
                    <el-table-column prop="clsj" label="成立时间"></el-table-column>
                    <el-table-column prop="ss" label="涉诉"></el-table-column>
                    <el-table-column prop="jy" label="经营"></el-table-column>
                    <el-table-column prop="zcjy" label="资产交易"></el-table-column>
                </el-table>
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="100">
                </el-pagination>
            </div>
            <el-row v-loading="body_loading" v-if="bodyShow">
                <div class="h_label"><i :style="{color:`${$store.getters.color}`}" class="el-icon-office-building"></i>
                    {{pInfo.qymc}}
                </div>
                <!-- <div class="h_label">
                    <i class="el-icon-price-tag"></i>
                    企业标签: <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark">
                        {{ item.label }}
                    </el-tag>
                </div> -->
                <el-col class="h_val" v-for="(tag,index) in mCount" :key="index" :lg="{span: '4-8'}">
                    {{tag.label}} ： {{tag.value}} {{tag.unit}}
                </el-col>
            </el-row>

            <div class="tab_body" v-loading="body_loading" v-if="bodyShow">
                <el-tabs v-model="tabNum" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="1">
                        <div class="info-container" v-loading="appLoging">
                            <h4 class="b">企业基本信息</h4>
                            <el-row>
                                <el-col class="lh" :span="16">
                                    <el-col :span="12">
                                        <el-col class="c" :span="10">
                                            统一社会信用代码
                                        </el-col>
                                        <el-col :span="14">
                                            {{pInfo.qyshxydm}}
                                        </el-col>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-col class="c" :span="10">
                                            企业名称
                                        </el-col>
                                        <el-col :span="14">
                                            {{pInfo.qymc}}
                                        </el-col>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-col class="c" :span="10">
                                            注册资金（万元）
                                        </el-col>
                                        <el-col :span="14">
                                            {{pInfo.zczb}}
                                        </el-col>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-col class="c" :span="10">
                                            法人姓名
                                        </el-col>
                                        <el-col :span="14">
                                            {{pInfo.frxm}}
                                        </el-col>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-col class="c" :span="10">
                                            所属行业
                                        </el-col>
                                        <el-col :span="14">
                                            {{pInfo.sshy}}
                                        </el-col>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-col class="c" :span="10">
                                            登记状态
                                        </el-col>
                                        <el-col :span="14">
                                            {{pInfo.djzt}}
                                        </el-col>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-col class="c" :span="10">
                                            工商注册登记日期
                                        </el-col>
                                        <el-col :span="14">
                                            {{pInfo.gszcdjrq}}
                                        </el-col>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-col class="c" :span="10">
                                            注册地址
                                        </el-col>
                                        <el-col :span="14">
                                            {{pInfo.zcdz}}
                                        </el-col>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-col class="c" :span="10">
                                            登记机关
                                        </el-col>
                                        <el-col :span="14">
                                            {{pInfo.djjg}}
                                        </el-col>
                                    </el-col>

                                    <el-col :span="12">
                                        <el-col class="c" :span="10">
                                            信用等级
                                        </el-col>
                                        <el-col :span="14">
                                            {{pInfo.xydj}}
                                        </el-col>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-col class="c" :span="10">
                                            经营范围
                                        </el-col>
                                        <el-col :span="14">
                                            {{pInfo.jyfw}}
                                        </el-col>
                                    </el-col>
                                </el-col>
                                <el-col :span="8" v-show="tabNum=='1'" class="gauge">
                                    <Gauge :cData="g1" id="g1" width="100%" height="340px"></Gauge>
                                </el-col>
                            </el-row>

                            <div class="table-container">
                                <h4 class="b">股东信息</h4>
                                <el-table :data="tabData.qygdxxList" border>
                                    <el-table-column prop="gdxm" label="股东姓名"></el-table-column>
                                    <el-table-column prop="gdrjje" label="股东认缴金额（万元）"></el-table-column>
                                    <el-table-column prop="zb" label="占总股本比例">
                                        <template slot-scope={row}>
                                            {{row.zb.toFixed(2)*100}}%
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <h4 class="b">企业变更信息</h4>
                                <el-table :data="tabData.qybgxxList" border>
                                    <el-table-column prop="bgrq" label="变更日期"></el-table-column>
                                    <el-table-column prop="bgsx" label="变更事项"></el-table-column>
                                </el-table>
                                <h4 class="b">注销信息</h4>
                                <el-table :data="tabData.qyzxxxList" border>
                                    <el-table-column prop="zxrq" label="注销日期"></el-table-column>
                                    <el-table-column prop="zxyy" label="注销原因"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="社保信息" name="2">
                        <div class="info-container" v-loading="appLoging">
                            <h4 class="b">社保缴费信息</h4>
                            <el-table :data="tabData.shfrbxjfxxList" border>
                                <el-table-column prop="qymc" label="企业名称"></el-table-column>
                                <el-table-column prop="cbrs" label="参保人数"></el-table-column>
                                <el-table-column prop="dwjfjs" label="单位缴费基数"></el-table-column>
                                <el-table-column prop="jfny" label="缴费年月"></el-table-column>
                                <el-table-column prop="byyjjehj" label="本月应缴金额合计（元）"></el-table-column>
                                <el-table-column prop="bysjjehj" label="本月实缴金额合计（元）"></el-table-column>
                            </el-table>
                            <h4 class="b">社保欠缴信息</h4>
                            <el-table :data="tabData.shfrsbqjxxList" border>
                                <el-table-column prop="qymc" label="企业名称"></el-table-column>
                                <el-table-column prop="qjjehj" label="欠缴金额合计（元）"></el-table-column>
                                <el-table-column prop="qjsd" label="欠缴时段"></el-table-column>
                                <el-table-column prop="sfbj" label="是否补缴"></el-table-column>
                                <el-table-column prop="sxyzcd" label="失信严重程度"></el-table-column>
                                <el-table-column prop="sxxwyxq" label="失信行为有效期"></el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="公积金信息" name="3">
                        <div class="info-container" v-loading="appLoging">
                            <div class="info-container">
                                <h4 class="b">公积金缴纳</h4>
                                <el-table :data="tabData.frgjjjcxxList" border>
                                    <el-table-column prop="dwmc" label="单位名称"></el-table-column>
                                    <el-table-column prop="hjrs" label="汇缴人数"></el-table-column>
                                    <el-table-column prop="dwjjl" label="单位缴交率"></el-table-column>
                                    <el-table-column prop="hjje" label="汇缴金额"></el-table-column>
                                    <el-table-column prop="schjny" label="首次汇缴年月"></el-table-column>
                                    <el-table-column prop="jzny" label="缴至年月"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="资产/交易" name="4">
                        <div class="info-container" v-loading="appLoging">
                            <div class="info-container">
                                <h4 class="b">车辆信息</h4>
                                <el-table :data="tabData.qyclxxList" border>
                                    <el-table-column prop="cphm" label="车牌号码"></el-table-column>
                                    <el-table-column prop="qclx" label="汽车类型"></el-table-column>
                                    <el-table-column prop="jdcss" label="机动车所属企业/个人"></el-table-column>
                                    <el-table-column prop="jdczt" label="机动车状态"></el-table-column>
                                    <el-table-column prop="zwpp" label="中文品牌"></el-table-column>
                                </el-table>
                                <h4 class="b">不动产登记信息</h4>
                                <el-table :data="tabData.qybdcdjxxList" border>
                                    <el-table-column prop="bdclx" label="不动产类型"></el-table-column>
                                    <el-table-column prop="qlr" label="权力人"></el-table-column>
                                    <el-table-column prop="bdclx" label="证件类型"></el-table-column>
                                    <el-table-column prop="zjhm" label="证件号码"></el-table-column>
                                    <el-table-column prop="mj" label="面积"></el-table-column>
                                    <el-table-column prop="yt" label="用途"></el-table-column>
                                    <el-table-column prop="bdcqzsh" label="不动产权证书号"></el-table-column>
                                    <el-table-column prop="djsj" label="登记时间"></el-table-column>
                                    <el-table-column prop="djjgqc" label="登记机关"></el-table-column>
                                </el-table>
                                <h4 class="b">房产查封信息</h4>
                                <el-table :data="tabData.fccfxxList" border>
                                    <el-table-column prop="cfjg" label="查封机关"></el-table-column>
                                    <el-table-column prop="cfjg" label="查封类型"></el-table-column>
                                    <el-table-column prop="cfwh" label="查封文号"></el-table-column>
                                    <el-table-column prop="cffw" label="查封范围"></el-table-column>
                                    <el-table-column prop="cfksqx" label="查封开始期限"></el-table-column>
                                    <el-table-column prop="cfjsqx" label="查封结束期限"></el-table-column>
                                    <el-table-column prop="zxsqr" label="执行申请人"></el-table-column>
                                </el-table>
                                <h4 class="b">土地权属信息</h4>
                                <el-table :data="tabData.tdqsxxList" border>
                                    <el-table-column prop="tdsyqr" label="土地使用权人"></el-table-column>
                                    <el-table-column prop="tdsyksqx" label="土地使用开始期限"></el-table-column>
                                    <el-table-column prop="tdsyjsqx" label="土地使用结束期限"></el-table-column>
                                    <el-table-column prop="fwyt" label="房屋用途"></el-table-column>
                                    <el-table-column prop="zcs" label="总层数"></el-table-column>
                                    <el-table-column prop="bdcqlr" label="不动产权利人"></el-table-column>
                                    <el-table-column prop="qllx" label="权利类型"></el-table-column>
                                    <el-table-column prop="gyqk" label="共有情况"></el-table-column>
                                    <el-table-column prop="tdsymj" label="土地使用权面积"></el-table-column>
                                </el-table>
                                <h4 class="b">不动产抵押信息</h4>
                                <el-table :data="tabData.qybdcdyxxList" border>
                                    <el-table-column prop="dyfs" label="抵押方式"></el-table-column>
                                    <el-table-column prop="dw" label="单位"></el-table-column>
                                    <el-table-column prop="zwr" label="债务人"></el-table-column>
                                    <el-table-column prop="zwlxksqx" label="债务履行开始期限"></el-table-column>
                                    <el-table-column prop="zwlxjsqx" label="债务履行结束期限"></el-table-column>
                                    <el-table-column prop="bdbzzqse" label="被担保主债权数额"></el-table-column>
                                </el-table>
                                <h4 class="b">专利授权</h4>
                                <el-table :data="tabData.zlsqxxList" border>
                                    <el-table-column prop="sqh" label="申请号"></el-table-column>
                                    <el-table-column prop="fmmc" label="发明名称"></el-table-column>
                                    <el-table-column prop="sqr" label="申请日"></el-table-column>
                                    <el-table-column prop="zlqrmc" label="专利权人名称"></el-table-column>
                                </el-table>
                                <h4 class="b">商标申请</h4>
                                <el-table :data="tabData.sbsqxxList" border>
                                    <el-table-column prop="zch" label="注册号"></el-table-column>
                                    <el-table-column prop="sbmc" label="商标名称"></el-table-column>
                                    <el-table-column prop="zcrmc" label="注册人名称"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="风险信息" name="5">
                        <div class="info-container" v-loading="appLoging">
                            <h4 class="b">行政处罚</h4>
                            <el-table :data="tabData.xzcfxxList" border>
                                <el-table-column prop="qymc" label="企业名称"></el-table-column>
                                <el-table-column prop="cfnr" label="处罚内容"></el-table-column>
                                <el-table-column prop="cfjdrq" label="处罚时间"></el-table-column>
                                <el-table-column prop="cfsy" label="处罚事由"></el-table-column>
                                <el-table-column prop="cfdw" label="处罚单位"></el-table-column>
                            </el-table>
                            <h4 class="b">黑名单信息</h4>
                            <el-table :data="tabData.hmdxxList" border>
                                <el-table-column prop="qymc" label="企业名称"></el-table-column>
                                <el-table-column prop="hmdzl" label="黑名单种类"></el-table-column>
                                <el-table-column prop="jbbm" label="经办部门"></el-table-column>
                            </el-table>
                            <h4 class="b">严重失信违法信息</h4>
                            <el-table :data="tabData.yzsxwfxxList" border>
                                <el-table-column prop="qymc" label="企业名称"></el-table-column>
                                <el-table-column prop="lrlx" label="列入类型"></el-table-column>
                                <el-table-column prop="lrrq" label="列入日期"></el-table-column>
                                <el-table-column prop="lrsshly" label="列入事实和理由"></el-table-column>
                                <el-table-column prop="ycrq" label="移除日期/更新日期"></el-table-column>
                            </el-table>
                            <h4 class="b">经营异常信息</h4>
                            <el-table :data="tabData.jyycxxList" border>
                                <el-table-column prop="qymc" label="企业名称"></el-table-column>
                                <el-table-column prop="lrjyycmlyy" label="列入原因"></el-table-column>
                                <el-table-column prop="lrrq" label="列入日期"></el-table-column>
                                <el-table-column prop="ycjyycmlyy" label="移除原因"></el-table-column>
                                <el-table-column prop="ycrq" label="移除日期"></el-table-column>
                                <el-table-column prop="zcjdjg" label="决策机关"></el-table-column>
                            </el-table>
                            <h4 class="b">强制执行信息</h4>
                            <el-table :data="tabData.qzzxxxList" border>
                                <el-table-column prop="zxfy" label="执行法院"></el-table-column>
                                <el-table-column prop="bzxrxm" label="被执行人名称"></el-table-column>
                                <el-table-column prop="bzxrsfzh" label="被执行人身份证号/组织机构代码" width="250"></el-table-column>
                                <el-table-column prop="lxqk" label="履行情况"></el-table-column>
                                <el-table-column prop="zxbd" label="执行标的（万元）"></el-table-column>
                                <el-table-column prop="sxqx" label="失信情形"></el-table-column>
                                <el-table-column prop="lasj" label="立案时间"></el-table-column>
                            </el-table>
                            <h4 class="b">企业被诉讼信息</h4>
                            <el-table :data="tabData.qybssxxList" border>
                                <el-table-column prop="lafy" label="法院"></el-table-column>
                                <el-table-column prop="ajlx" label="案件类型"></el-table-column>
                                <el-table-column prop="ajlx" label="案件事由"></el-table-column>
                                <el-table-column prop="larq" label="立案日期"></el-table-column>
                                <el-table-column prop="ssqq" label="诉讼请求"></el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-card>
    </div>
</template>

<script>
    import Gauge from '@/components/Charts/Gauge';
    import {
        t0,
        t1,
        t2,
        t3,
        t4,
        t5
    } from '@/api/portay.js'
    export default {
        components: {
            Gauge
        },
        data() {
            return {
                cName: '', //搜索,
                body_loading: false,
                appLoging: true,
                bodyShow: false,
                currentPage: 1,
                hisList: [{
                    qymc: '余姚市胜利电子商务有限公司',
                    zczb: '50.5',
                    fddbr: '菇恨思',
                    clsj: '2021/2/18',
                    ss: '1',
                    jy: '1',
                    zcjy: '1',
                }, {
                    qymc: '宁波佳佳国际贸易有限公司',
                    zczb: '50.5',
                    fddbr: '吴启',
                    clsj: '2021/04/24',
                    ss: '1',
                    jy: '1',
                    zcjy: '1',
                }, {
                    qymc: '余姚市马云塑化有限公司',
                    zczb: '50.5',
                    fddbr: '于小宇',
                    clsj: '2021/05/01',
                    ss: '1',
                    jy: '1',
                    zcjy: '1',
                }, {
                    qymc: '余姚宝强塑料厂',
                    zczb: '50.5',
                    fddbr: '菇恨思',
                    clsj: '2021/10/19',
                    ss: '1',
                    jy: '1',
                    zcjy: '1',
                }],
                /* 标签 */
                items: [{
                        type: '',
                        label: '高新技术企业'
                    },
                    {
                        type: 'success',
                        label: '高成长企业'
                    },
                    {
                        type: 'danger',
                        label: '信用良好企业'
                    }
                ],

                /* 数据统计 */
                mCount: [{
                        label: '股东人数',
                        value: '1',
                        code: 'qygdxxCount',
                        unit: '人'
                    },
                    {
                        label: '企业变更信息',
                        value: '1',
                        code: 'qybgxxCount',
                        unit: '条'
                    },
                    {
                        label: '注销信息',
                        value: '1',
                        code: 'qyzxxxCount',
                        unit: '条'
                    },
                    {
                        label: '社保缴费信息',
                        value: '12',
                        code: 'sbsqxxCount',
                        unit: '条'
                    },
                    {
                        label: '社保欠缴信息',
                        value: '1',
                        code: 'shfrsbqjxxCount',
                        unit: '条'
                    },
                    {
                        label: '公积金信息',
                        value: '1',
                        code: 'frgjjjcxxCount',
                        unit: '条'
                    },
                    {
                        label: '行政处罚信息',
                        value: '1',
                        code: 'xzcfxxCount',
                        unit: '条'
                    },
                    {
                        label: '黑名单信息',
                        value: '1',
                        code: 'hmdxxCount',
                        unit: '条'
                    }, {
                        label: '严重失信违法信息',
                        value: '1',
                        code: 'yzsxwfxxCount',
                        unit: '条'
                    }, {
                        label: '经营异常信息',
                        value: '1',
                        code: 'jyycxxCount',
                        unit: '条'
                    }, {
                        label: '强制执行信息',
                        value: '1',
                        code: 'qzzxxxCount',
                        unit: '条'
                    }, {
                        label: '企业诉讼信息',
                        value: '1',
                        code: 'qybssxxCount',
                        unit: '条'
                    }, {
                        label: '车辆信息',
                        value: '1',
                        code: 'qyclxxCount',
                        unit: '条'
                    }, {
                        label: '不动产登记信息',
                        value: '1',
                        code: 'qybdcdjxxCount',
                        unit: '条'
                    }, {
                        label: '房产查封信息',
                        value: '1',
                        code: 'fccfxxCount',
                        unit: '条'
                    }, {
                        label: '土地权属信息',
                        value: '1',
                        code: 'tdqsxxCount',
                        unit: '条'
                    }, {
                        label: '不动产抵押信息',
                        value: '1',
                        code: 'qybdcdyxxCount',
                        unit: '条'
                    }, {
                        label: '专利授权信息',
                        value: '1',
                        code: 'zlsqxxCount',
                        unit: '条'
                    }, {
                        label: '商标申请信息',
                        value: '1',
                        code: 'sbsqxxCount',
                        unit: '条'
                    }
                ],
                /* 企业基本信息 */
                pInfo: {
                    djjg: "余姚市场监督局",
                    djzt: "正常",
                    frxm: "张二河",
                    gszcdjrq: "2019年5月",
                    gszcdqrq: "",
                    jycs: "",
                    jyfw: "销售批发",
                    jyzt: "",
                    qylx: "",
                    qymc: "大米公司余姚分公司",
                    qyshxydm: "889765656huuttrt",
                    sshy: "互联网",
                    xydj: "",
                    zcdz: "余姚市新建北路222号",
                    zczb: 1100.2
                },
                /* tabs系列 */
                tabNum: '1',
                g1: {
                    title: '企业综合评分',
                    data: 0
                },

                /* 获取表格数据 */
                tabData: {}
            }
        },
        mounted() {
            setTimeout(() => {
                this.appLoging = false;
            }, 500);

        },
        methods: {
            // 查询企业
            queryQy(e) {
                e = e.replace(/^\s+|\s+$/g, "")
                if (e) {
                    this.getData({
                        shxydm: e
                    })
                } else {
                    return
                }
            },
            getData(params) {
                this.body_loading = true;
                this.bodyShow = true;
                let p0 = new Promise((resolve, reject) => {
                    t0(params).then(data => {
                        resolve(data)
                    }).catch(err => {
                        reject(err)
                    })
                });
                let p1 = new Promise((resolve, reject) => {
                    t1(params).then(data => {
                        resolve(data)
                    }).catch(err => {
                        reject(err)
                    })
                });
                let p2 = new Promise((resolve, reject) => {
                    t2(params).then(data => {
                        resolve(data)
                    }).catch(err => {
                        reject(err)
                    })
                });
                let p3 = new Promise((resolve, reject) => {
                    t3(params).then(data => {
                        resolve(data)
                    }).catch(err => {
                        reject(err)
                    })
                });
                let p4 = new Promise((resolve, reject) => {
                    t4(params).then(data => {
                        resolve(data)
                    }).catch(err => {
                        reject(err)
                    })
                });
                let p5 = new Promise((resolve, reject) => {
                    t5(params).then(data => {
                        resolve(data)
                    }).catch(err => {
                        reject(err)
                    })
                });
                Promise.all([p0, p1, p2, p3, p4, p5]).then(r => {
                    if (r) {
                        let countTotal = {};
                        let dataTab = {};
                        r.map((item) => {
                            let {
                                data
                            } = item;
                            for (let key in data) {
                                if (typeof data[key] == "object") {
                                    dataTab[key] = data[key];
                                } else {
                                    countTotal[key] = data[key]
                                }
                            }
                        });
                        /* 企业综合评分赋值 */
                        this.g1['data'] = countTotal.score;
                        /* 赋值统计数据 */
                        this.mCount = this.mCount.map(i => {
                            if (countTotal[i.code]) {
                                i['value'] = countTotal[i.code];
                                return {
                                    label: i.label,
                                    value: countTotal[i.code],
                                    code: i.code,
                                    unit: i.unit
                                }
                            }
                        });
                        /* 赋值标签 */
                        this.items = this.items.map((t, i) => {
                            return {
                                label: dataTab.tag[i],
                                type: t.type
                            }
                        })
                        /* 赋值基本信息 */
                        this.pInfo = dataTab.qyjbxx
                        /* 赋值表格数据 */
                        this.tabData = dataTab;

                        console.log(dataTab);
                    } else {
                        console.log("无数据!")
                    }
                    this.body_loading = false;
                }).catch(err => {
                    console.log(err);
                });
            },
            handleClick(e) {
                this.appLoging = true;
                setTimeout(() => {
                    this.appLoging = false;
                }, 500);
            },
            toPortray(e) {
                this.getData({
                    shxydm: e.qymc
                })
            },
            /* 分页 */
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped="scoped" lang="scss">
    /deep/ .el-col-lg-4-8 {
        width: 20%;
    }

    .b {
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 20px;
    }

    .lh {
        line-height: 35px;
    }

    .c {
        color: #409EFF;
    }

    .his_table {
        margin: 1rem 0;
        border-bottom: 1px solid #e6e9f4;
        font-size: 1rem;

        /deep/ .el-pagination {
            padding: 0.5rem 0;
        }

        .h_tab {
            display: inline-block;
            margin-bottom: 1rem;
            font-family: PingFangSC-Medium;
            font-size: 1rem;
            line-height: 1.5rem;
            letter-spacing: 0rem;
            padding-bottom: 0.5rem;
            color: #1e5eff;
            border-bottom: 3px solid;
            border-radius: 1px;
        }
    }

    .h_label {
        line-height: 0.54rem;
        color: #3a3f63;
        font-size: 1.5rem;
        margin: 1.5rem 0;

        .el-icon-price-tag {
            color: #0055ff;
            font-weight: 600;
        }

        .el-tag {
            margin: 0 5px;
        }
    }

    .h_val {
        line-height: 1.38rem;
        color: #5a607f;
        font-size: 1rem;
        margin: 0.5rem 0;
    }

    .tab_body {
        margin-top: 20px;

        /deep/ .el-tabs__item {
            font-size: 20px;
            font-weight: 600;
        }

        .info-container {
            position: relative;
            width: 90%;

            .gauge {
                position: absolute;
                right: 0;
                top: -40px;
            }
        }

        .table-container {
            width: 85%;
        }
    }
</style>
